<template>
  <el-row id="business">
    <!-- head -->
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark head">
          <el-form ref="form" :model="form" label-width="80px">
            <el-row :gutter="20">
              <el-col :span="20">
                <el-form-item label="策略搜索">
                  <el-input placeholder="请输入内容" v-model="policyName">
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="4">
                <el-button class="el-icon-search" type="primary" @click="search"
                  >查询</el-button
                >
              </el-col>
            </el-row>
          </el-form>
        </div></el-col
      >
    </el-row>
    <!-- main -->
    <el-row :gutter="20" calss="main">
      <!-- 新增按钮 -->
      <el-row :gutter="20" class="btn-row">
        <el-col :span="12">
          <el-button
            type="primary"
            class="btnBgc el-icon-circle-plus-outline"
            @click.native.prevent="dialogFormVisible = true"
            >新建</el-button
          >
        </el-col>
      </el-row>
      <!-- 表单区域 -->
      <el-table
        :data="policyList"
        style="width: 100%"
        :header-cell-style="{ background: '#f3f6fb' }"
        :cell-style="{ border: 'none' }"
        :highlight-current-row="true"
      >
        <el-table-column type="index" label="序号" width="100">
        </el-table-column>
        <el-table-column prop="policyName" label="策略名称" width="400">
        </el-table-column>
        <el-table-column prop="discount" label="策略方案" width="400">
        </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建日期"
          width="200"
          :formatter="formatDate"
        >
        </el-table-column>
        <el-table-column width="200" label="操作">
          <!-- 作用域插槽 -->
          <template slot-scope="scope">
            <el-row type="flex" justify="start" align="center">
              <el-col :span="10"
                ><a
                  href="javascript:void(0);"
                  @click="check(scope.$index, scope.row)"
                  >查看详情</a
                ></el-col
              >
              <el-col :span="6">
                <a
                  href="javascript:void(0);"
                  @click="edit(scope.$index, scope.row)"
                  >修改</a
                >
              </el-col>
              <el-col :span="6" style="color: #eb4492">
                <a
                  href="javascript:void(0);"
                  @click="del(scope.$index, scope.row)"
                  >删除</a
                >
              </el-col>
            </el-row>
          </template>
        </el-table-column>
      </el-table>
    </el-row>

    <!-- 新增&编辑弹出框 -->
    <el-dialog
      :title="formData.policyId ? '修改策略' : '新增策略'"
      :visible.sync="dialogFormVisible"
      :before-close="beforeClose"
      width="40%"
    >
      <el-form :model="formData" ref="formData" :rules="rules">
        <el-form-item
          label="策略名称"
          :label-width="formLabelWidth"
          prop="policyName"
        >
          <el-input
            v-model="formData.policyName"
            autocomplete="off"
            placeholder="请输入"
            style="width: 396px"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="策略方案"
          :label-width="formLabelWidth"
          prop="discount"
        >
          <el-input-number
            v-model="formData.discount"
            :min="1"
            :max="100"
            placeholder="请输入"
            style="width: 396px"
            controls-position="right"
          ></el-input-number>
        </el-form-item>
      </el-form>
      <el-row type="flex" justify="center" :gutter="20" class="channelbtn">
        <el-button-group>
          <el-col :span="12">
            <el-button @click="cancel">取消</el-button>
          </el-col>
          <el-col :span="12">
            <el-button type="primary" @click="submit">确认</el-button>
          </el-col>
        </el-button-group>
      </el-row>
    </el-dialog>

    <!-- 策略详情弹出框 -->
    <el-dialog title="策略详情" :visible.sync="dialogTableVisible" width="35%">
      <el-descriptions :column="1">
        <el-descriptions-item label="策略名称">{{
          formData.policyName
        }}</el-descriptions-item>
        <el-descriptions-item label="策略方案">
          <el-table
            :data="detailData"
            :header-cell-style="{ background: '#f3f6fb' }"
            :cell-style="{ border: 'none' }"
            :highlight-current-row="true"
          >
            <el-table-column
              type="index"
              label="序号"
              width="50"
            ></el-table-column>
            <el-table-column
              property="nodeName"
              label="点位名称"
              width="200"
            ></el-table-column>
            <el-table-column
              property="innerCode"
              label="设备编号"
              width="150"
            ></el-table-column>
           <template #append>
            <el-row type="flex" justify="space-between" align="center">
              <el-col :span="12">
                共{{ totalCount }}条记录 第 {{ currentPage }}/{{
              totalPage
            }}
            页
              </el-col>
              <el-col :span="12">
                <el-button
                type="primary"
                class="prePage"
                ref="pageUp"
                @click="pageBack"
                :disabled="isBackDisabled"
                size="mini"
                >上一页</el-button
              >
              <el-button
                type="primary"
                ref="pageBack"
                @click="pageUp"
                :disabled="isUpDisabled"
                size="mini"
                >下一页</el-button
              >
              </el-col>
            </el-row>
            </template
          >
          </el-table>
        </el-descriptions-item>
        <!-- 分页 -->
      </el-descriptions>
    </el-dialog>
  </el-row>
</template>

<script>
import {
  getPolicySearch,
  postPolicy,
  editPolicy,
  deletePolicy,
  getVmList
} from '@/api/vm'
export default {
  created () {
    this.getStrategyList()
  },
  data () {
    return {
      form: {
        pageIndex: 1,
        pageSize: 10,
        policyName: ''
      },
      policyList: [],
      policyName: '',
      formData: {
        discount: '',
        policyName: ''
      },
      rules: {
        policyName: [
          { required: true, message: '请输入策略名称', trigger: 'blur' },
          {
            min: 1,
            max: 15,
            message: '策略名称为一到十五位字符',
            trigger: 'blur'
          }
        ],
        discount: [
          { required: true, message: '请输入策略名称', trigger: 'blur' }
        ]
      },
      detailData: [],
      formLabelWidth: '120px',
      dialogFormVisible: false,
      dialogTableVisible: false,
      totalPage: 1,
      currentPage: 1,
      totalCount: 0,
      isBackDisabled: false,
      isUpDisabled: false
    }
  },
  methods: {
    async del (i, r) {
      try {
        await deletePolicy(r.policyId)
        this.$message.success('删除成功')
      } catch (err) {
        if (err.response) {
          this.$message.error(err.response.data)
        }
      }
    },
    async check (i, { discount, policyName, policyId }) {
      this.dialogTableVisible = true
      this.formData = {
        discount,
        policyName,
        policyId
      }
      this.getDetailStrategyList()
    },
    async getDetailStrategyList () {
      const res = await getVmList(this.formData.policyId, {
        pageIndex: this.currentPage,
        pageSize: 10
      })
      this.detailData = res.currentPageRecords
      this.totalPage = +res.totalPage
      this.totalCount = +res.totalCount
    },
    edit (i, { discount, policyName, policyId }) {
      this.dialogFormVisible = true
      this.formData = {
        discount,
        policyName,
        policyId
      }
    },
    search () {
      this.form.policyName = this.policyName
      this.getStrategyList()
      this.policyName = ''
    },
    async getStrategyList () {
      const res = await getPolicySearch(this.form)
      this.policyList = res.currentPageRecords
    },
    beforeClose () {
      this.formData = {
        discount: '',
        policyName: ''
      }
      this.$refs.formData.resetFields()
      this.dialogFormVisible = false
    },
    async submit () {
      try {
        await this.$refs.formData.validate()
        if (this.formData.policyId) {
          await editPolicy(this.formData)
          this.$message.success('修改成功')
        } else {
          await postPolicy(this.formData)
          this.$message.success('新增成功')
        }
      } catch (err) {
        if (err.response) {
          this.$message.error(err.response.data)
        }
      }
      this.beforeClose()
    },
    cancel () {
      this.beforeClose()
    },
    formatDate (row, column, cellValue, index) {
      return cellValue.replace(/T/, ' ')
    },
    // 下一页
    pageUp () {
      this.currentPage++
      this.isBackDisabled = false
      if (this.currentPage === this.totalPage) {
        this.isUpDisabled = true
      }
    },
    // 上一页
    pageBack () {
      this.currentPage--
      this.isUpDisabled = false
      if (this.currentPage === 1) {
        this.isBackDisabled = true
      }
    }
  },
  watch: {
    currentPage (val) {
      this.form.pageIndex = val
      this.getDetailStrategyList()
    }
  }
}
</script>

<style lang="scss" scoped>
#business {
  padding: 10px 0 0 30px;
  background-color: #f8fafd;
  .btn-row {
    margin-bottom: 20px;
  }
  .main {
    margin-top: 30px;
  }
  .el-form-item__label {
    font-weight: 400;
  }
  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 500px;
  }
  .fr {
    float: right;
    display: flex;
    justify-content: space-between;
    width: 300px;
  }
  .fl {
    float: left;
  }
  .btnBgc {
    background-color: #409eff;
  }
  .modify {
    height: 30px;
    width: 30px;
    display: flex;
    flex-direction: column-reverse;
    .el-button {
      height: 50%;
      width: 100%;
    }
  }
  ::v-deep.el-table th.el-table__cell {
    background-color: rgb(243, 246, 251);
  }
  .row-bg {
    background-color: hsla(0, 0%, 92.5%, 0.39);
    height: 54px;
    line-height: 54px;
    margin-bottom: 25px;
    font-size: 26px;
    position: relative;
    i {
      padding-left: 20px;
    }
    span {
      font-size: 15px;
    }
    .absolute {
      display: inline-block;
      position: absolute;
      top: -10px;
      left: 400px;
    }
    .el-descriptions__body .el-descriptions__table {
      margin-left: 20px;
    }
    .center {
      display: flex;
      justify-content: center;
      align-items: center;
      line-height: 100%;
      height: 100%;
      img {
        display: inline-block;
      }
    }
  }
  .channelbtn {
    margin-top: 20px;
  }
  ::v-deep.el-pagination {
    color:#dbdfe5;
    border: none;
    font-weight: 400;
  }
}
</style>
